<template>
	<public-view navType="other" navTitle="预约订单">
		<view class="content flex a-i-c f-d-c">
			<view class="store-item-box flex f-d-c">
				<view class="item-top-box flex a-i-c" v-if="item.type===2">
					<view class="left flex a-i-c f-s-30 f-w-b">
						{{item.merchant.name}}
					</view>
					<!-- <view class="locaiton-box color-979797 f-s-24 a-i-c flex">
						<image class="icon" src="@/static/images/circle/location-icon.svg" mode=""></image>
						起始地:金水区·五里店江北
					</view> -->
				</view>
				<view class="item-top-box flex a-i-c" v-else>
					<view class="left flex a-i-c f-s-30 f-w-b">
						{{item.real_store?.name||""}}
					</view>
					<!-- <view class="locaiton-box color-979797 f-s-24 a-i-c flex">
						<image class="icon" src="@/static/images/circle/location-icon.svg" mode=""></image>
						{{item.real_store?.province_text||""}}{{item.real_store?.city_text||""}}{{item.real_store?.area_text||""}}
					</view> -->
				</view>
				<block v-if="item.type===2">
					<block v-for="(item, idx) in item.goods_list" :key="idx">
						<view class="center2 flex a-i-c">
							<image class="image2" :src="item.goods_sku_product_image" mode=""></image>
							<view class="right-title">
								<view class="name f-s-30">
									{{item.goods_name||""}}
								</view>
								<view class="f-s-24 l-h-34">
									{{item.sku_text||""}}/数量{{item.num||0}}
								</view>
							</view>
							<view class="f-s-32 f-w-b">
								<text class="f-s-24 f-w-4">￥</text>{{item.amount||0}}
							</view>
						</view>
					</block>
				</block>
				<block v-else>
					<view class="center2 flex a-i-c">
						<image class="image2" :src="item.lorry?.pic" mode=""></image>
						<view class="right-title">
							<view class="name f-s-30">
								{{item.lorry?.name||""}}
							</view>
							<view class="money f-s-22">
								<text class="f-s-40 f-w-b" style="font-style: italic;">{{item.lorry?.front_price||0}}</text>万
							</view>
							<view class="f-s-26 color-999">
								定金<text>￥</text><text class="f-w-b" style="color: #FF3158;">{{item.allow_refund_amount||0}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="order-info-box flex f-d-c w-100">
				<block v-if="btn_type !=='cancle'">
					<view class="title f-s-26 color-333 f-w-b">
						订单详情
					</view>
					<view class="form-item w-100 flex a-i-c j-c-b">
						<view class="left color-999 f-s-24">
							称呼
						</view>
						<view class="right f-s-24 color-333">
							{{item.name||""}}
						</view>
					</view>
					<view class="form-item w-100 flex a-i-c j-c-b">
						<view class="left color-999 f-s-24">
							电话
						</view>
						<view class="right f-s-24 color-333">
							{{item.mobile||""}}
						</view>
					</view>
					<view class="form-item w-100 flex a-i-c j-c-b">
						<view class="left color-999 f-s-24">
							预约门店
						</view>
						<view class="right f-s-24 color-333">
							{{item.real_store?.name||""}}
						</view>
					</view>
					<view class="form-item w-100 flex a-i-c j-c-b">
						<view class="left color-999 f-s-24">
							定金
						</view>
						<view class="right f-s-24 color-333">
							¥{{item.allow_refund_amount||0}}
						</view>
					</view>
					<view class="form-item w-100 flex a-i-c j-c-b">
						<view class="left color-999 f-s-24">
							下单时间
						</view>
						<view class="right f-s-24 color-333">
							{{createtime||""}}
						</view>
					</view>
					<view class="form-item w-100 flex a-i-c j-c-b">
						<view class="left color-999 f-s-24">
							退单险
						</view>
						<view class="right f-s-24 color-333">
							¥{{item.refund_price||0}}
						</view>
					</view>
				</block>
				<block v-else>
					<picker mode="selector" :range="goods_cancel_reason" @change="changeCancleText">
						<view class="form-item w-100 flex a-i-c j-c-b">
							<view class="left color-333 f-s-24 lefta">
								取消原因
							</view>
							<view class="paddinga" style="flex: 1;">
								<input :disabled="true" class="f-s-24 inputa" v-model="cancle_text" style="flex: 1;" type="text" placeholder="请输入您的取消原因" placeholder-style="color:#A4A4A4;" />
							</view>
						</view>
					</picker>
					<view class="form-item w-100 flex a-i-c j-c-b">
						<view class="left color-333 f-s-24 lefta">
							备注
						</view>
						<view class="paddinga" style="flex: 1;">
							<textarea name="" v-model="desc" id="" class="textarea"></textarea>
						</view>
					</view>
				</block>
			</view>
			<view class="operate-box f-s-24 flex a-i-c j-c-e" v-if="btn_type !== 'cancle'">
				<view class="item bg1 all-center" @click="$callPhone">
					联系门店
				</view>
				<view class="item bg2 all-center" v-if="item.status?.buttons?.refund" @click="btn_type = 'cancle'">
					取消预约
				</view>
				<view class="item bg2 all-center" v-if="item.status?.buttons?.cancel" @click="cancleOrder">
					取消订单
				</view>
				<view class="item bg3 all-center" @click.stop="showPayType" v-if="item.status?.buttons?.pay">
					去支付
				</view>
			</view>
			<bottom-btn :positon="false" @click="cancleReady" v-else>确认取消</bottom-btn>
			<pay-type-popup ref="payTypePopup" :item="item"></pay-type-popup>
		</view>
	</public-view>
</template>

<script>
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import payTypePopup from "@/components/myComponents/payTypePopup.vue"
	import payPassword from "@/components/myComponents/paypassword.vue"
	import {cancleOrder} from "@/utils/pagePublic.js"
	export default {
		components:{
			"bottom-btn":bottomBtn,
			"pay-type-popup":payTypePopup,
			"pay-password":payPassword
		},
		data() {
			return {
				order_id:"",
				item:{},
				btn_type:"other",
				goods_cancel_reason:[],
				cancle_text:"",
				desc:"",
				pay_pass:""
			};
		},
		computed:{
			createtime(){
				let date = new Date(this.item.createtime*1000)
				let yyyy = date.getFullYear()
				let mm = date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
				let dd = date.getDate()<10?`0${date.getDate()}`:date.getDate()
				return `${yyyy}-${mm}-${dd}`
			}
		},
		onLoad(o) {
			this.order_id = o.id
			if(o.btn){
				this.btn_type = o.btn
			}
			this.goods_cancel_reason = this.$store.state.public_config.lorry[0].value
			this.getOrderInfo()
		},
		methods:{
			cancleOrder(itema){
				let that = this
				let item = this.$store.state.public_config.lorry[0].value
				uni.showActionSheet({
					itemList:item,
					success(res) {
						cancleOrder({
							order_id:that.order_id,
							reason:item[res.tapIndex]
						},()=>{
							uni.showToast({
								title:"取消成功"
							})
							let timeout  = setTimeout(()=>{
								clearTimeout(timeout)
								uni.navigateBack()
							},2000)
						})
					}
				})
				
			},
			successPayPassword(e){
				this.pay_pass = e
				this.payMoneyPost(true)
			},
			changeCancleText(e){
				let index = e.detail.value
				this.cancle_text = this.goods_cancel_reason[index]
			},
			cancleReady(){
				let that = this
				if(that.cancle_text === ""){
					uni.showToast({
						title:"请选择取消原因",
						icon:"none"
					})
					return
				}
				that.util.postRequest({
					url:"v1/order/refund",
					data:{
						order_id:that.order_id,
						reason:that.cancle_text,
						desc:that.desc,
						images:[]
					}
				}).then(res=>{
					uni.showToast({
						title:"取消成功"
					})
					let timeout  = setTimeout(()=>{
						clearTimeout(timeout)
						uni.navigateBack()
					},2000)
				}).catch(e=>{
					uni.showToast({
						title:e.msg||"请求失败",
						icon:"none"
					})
				})
			},
			showPayType(){
				this.$refs.payTypePopup.show()
			},
			getOrderInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/order/info",
					data:{
						order_id:that.order_id
					}
				}).then(res=>{
					console.log(res)
					that.item = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.textarea{
		width: 498upx;
		height: 122upx;
		padding: 12upx 36upx;
		background: #F7F7F7;
		border-radius: 8upx;
	}
	.inputa{
		flex: 1;
	}
	.paddinga{
		padding-left: 38upx;
	}
	.operate-box{
		width: 100%;
		padding-right: 32upx;
		.item{
			width: 158upx;
			height: 58upx;
			border-radius: 30upx;
			margin-right: 22upx;
		}
		.bg1{
			border: 1upx solid #CCCCCC;
		}
		.bg2{
			background: #2567F3;
			color: #FFFFFF;
		}
		.bg3{
			background: #F32E2E;
			color: #FFFFFF;
		}
	}
	.order-info-box{
		padding: 28upx 40upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 32upx;
		.title{
			margin-bottom: 30upx;
		}
		.form-item{
			margin-bottom: 40upx;
		}
	}
	.lefta{
		margin-right: 28upx;
	}
	.store-item-box{
		width: 702upx;
		margin-bottom: 16upx;
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 24upx 36upx;
		margin-bottom: 20upx;
		.center2{
			width: 100%;
			margin-bottom: 24upx;
			.right-title{
				width: 418upx;
				.money{
					color: #EE8300;
					line-height: 48upx;
					margin-bottom: 14upx;
				}
				.name{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 14upx;
					line-height: 30upx;
				}
			}
			.image2{
				width: 168upx;
				height: 168upx;
				border-radius: 8upx;
				margin-right: 26upx;
			}
		}
		.item-top-box{
			width: 100%;
			margin-bottom: 20upx;
			.locaiton-box{
				margin-left: 24upx;
				.icon{
					width: 26upx;
					height: 26upx;
					margin-right: 4upx;
				}
			}
			.status-text{
				
			}
			.color1{
				color: #F32E2E;
			}
			.color2{
				color: #2567F3;
			}
			.color3{
				color: #FBA808;
			}
			.left{
				.icon{
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}
			}
		}
	}
	.content{
		width: 750upx;
		padding-top: 32upx;
	}
</style>
